import React, { Component } from 'react'
import styled from 'styled-components';

/*
  1. 安装： npm i styled-components
  2. 导入： import styled from 'styled-components';
  3. 如果写样式的时候没有颜色和提示可以安装 vscode 插件 vscode-styled-components
  4. 使用
  const Title = styled.h1`
    width: 200px;
    height: 50px;
    background-color: red;
  `
  5. Title 就是具有样式的组件，使用的时候直接用 Title 即可
*/



const Title = styled.h1`
  width: 200px;
  height: 50px;
  background-color: red;
  color: white;
`

const Nav = styled.h1`
  width: 300px;
  height: 150px;
  background-color: green;
  color: white;
`

export default class App extends Component {
  render() {
    return (
      <div>
        <Title>你好世界</Title>
        <Nav>工资每个都会发一次，一次可以持续一个星期</Nav>
      </div>
    )
  }
}
